<template>
  <custom-title-bar title="订单详情" />
  <view :style="{ top: view.topBar.bottom + 'px', bottom: safeArea.bottom + 'px' }" class="content">
    <view class="state">
      <span class="state-name">{{ orderStateLabelOf(orderInfo?.state) }}</span>
      <span class="additional-instructions">{{ orderStateTipsOf(orderInfo?.state) }}</span>
      <view class="bts">
        <span
          class="cancel-order"
          v-if="OrderStateGroups.cancellableStates.includes(orderInfo?.state!)"
          style="color: rgb(255 132 132)"
          >取消订单</span
        >
        <span class="another-order" v-if="OrderStateGroups.finalStates.includes(orderInfo?.state!)">再来一单</span>
        <span class="another-order" v-if="orderInfo?.state == OrderState.PRODUCTION_COMPLETED"
          ><uni-icons custom-prefix="iconfont" type="icon-yiqucan" size="13"></uni-icons>&nbsp;我已取餐</span
        >
        <span
          class="cancel-order"
          v-if="OrderStateGroups.canAfterSalesStates.includes(orderInfo?.state!)"
          style="color: rgb(255 132 132)"
          >申请售后</span
        >
      </view>
    </view>
    <view class="cart-item-list">
      <view class="list">
        <view class="dish" v-for="(dish, index) in orderInfo?.orderDetailList" :key="index">
          <view class="dish-info">
            <image class="dish-image" :src="dish.image" />
            <view class="info-name">
              <span class="dish-name">{{ dish.name }}</span>
              <span class="flavors">{{ dish.dishFlavor }}</span>
            </view>
          </view>
          <span class="count">x {{ dish.count }}</span>
          <view class="spec-price">
            <span>￥{{ dish.specPrice }}</span>
          </view>
        </view>
      </view>
      <view class="statistics">
        <span class="amount-desc"
          >实付 <span class="amount">￥{{ orderInfo?.amount.toFixed(2) }}</span></span
        >
      </view>
    </view>
    <view class="order-info">
      <view class="title">
        <span>订单信息</span>
      </view>
      <view class="list">
        <view class="info-item">
          <span class="item-name">订单编号</span>
          <span class="item-value">{{ orderInfo?.orderNo }}</span>
        </view>
        <view class="info-item">
          <span class="item-name">下单时间</span>
          <span class="item-value">{{ orderInfo?.createTime }}</span>
        </view>
        <view class="info-item" v-if="ReceivingMethod.DELIVERY == orderInfo?.receivingMethod">
          <span class="item-name">配送地址</span>
          <span class="item-value">{{ orderInfo?.deliveryAddress }}</span>
        </view>
        <view class="info-item" v-if="orderInfo?.remark != null && orderInfo?.remark != ''">
          <span class="item-name">备注信息</span>
          <span class="item-value">{{ orderInfo?.remark }}</span>
        </view>
        <view class="info-item">
          <span class="item-name">期望时间</span>
          <span class="item-value">{{
            orderInfo?.isImmediate
              ? ReceivingMethod.DELIVERY
                ? '尽快送达'
                : '尽快制作'
              : orderInfo?.estimatedDeliveryTime
          }}</span>
        </view>
        <view class="info-item">
          <span class="item-name">交付方式</span>
          <span class="item-value"
            >{{ receivingMethodLabelOf(orderInfo?.receivingMethod) }}
            {{
              orderInfo?.receivingMethod !== null && ReceivingMethod.DELIVERY !== orderInfo?.receivingMethod
                ? ` (${ReceivingMethod.SHOP_EAT === orderInfo?.receivingMethod ? '座位号' : '取餐号'} ${
                    orderInfo?.code ?? ''
                  }号)`
                : ''
            }}</span
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import $API from '@/api'
import CustomTitleBar from '@/components/custom-title-bar/index.vue'
import $store from '@/store'
import { onMounted, ref } from 'vue'
import { OrderInfo } from '@/types/response/order'
import { OrderState, orderStateLabelOf, orderStateTipsOf, OrderStateGroups } from '@/enum/OrderState'
import { ReceivingMethod, receivingMethodLabelOf } from '@/enum/ReceivingMethod'
const { safeArea, view } = $store.app.getSystemParam()

const query = defineProps({
  orderId: {
    type: String,
    require: true
  }
})
const orderInfo = ref<OrderInfo>()
onMounted(async () => {
  const result = await $API.order.info(query.orderId!)
  if (result.success) orderInfo.value = result.data
  console.log('订单详情：', orderInfo)
})
</script>

<style scoped lang="scss">
.content {
  $area-lr-padding-size: 40rpx;

  position: fixed;
  right: 0;
  left: 0;
  overflow-y: auto;
  background-color: #eee;

  .state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15rpx 0rpx 40rpx;
    width: 100vw;
    background-color: #fff;

    .state-name {
      height: 70rpx;
      font-size: 35rpx;
      font-weight: 700;
      line-height: 70rpx;
    }

    .additional-instructions {
      font-size: 25rpx;
      color: #737373;
    }

    .bts {
      .another-order,
      .cancel-order {
        display: inline-block;
        margin: 0 15rpx;
        margin-top: 25rpx;
        padding: 10rpx 40rpx;
        font-size: 28rpx;
        border: 1px solid #ccc;
        border-radius: 10rpx;
        color: #737373;
      }
    }
  }

  .cart-item-list {
    margin-top: 30rpx;
    padding: 25rpx $area-lr-padding-size 10rpx;
    background-color: #fff;
    box-sizing: border-box;

    .list {
      .dish {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20rpx 0;
        width: 100%;
        line-height: 50rpx;

        .dish-info {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .dish-image {
            display: inline-block;
            margin-right: 20rpx;
            width: 70rpx;
            height: 70rpx;
          }

          .info-name {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .dish-name {
              font-size: 25rpx;
              line-height: 35rpx;
            }

            .flavors {
              font-size: 20rpx;
              line-height: 30rpx;
              color: #737373;
            }
          }
        }

        .count {
          font-size: 27rpx;
        }

        .spec-price {
          font-size: 28rpx;
        }
      }
    }

    .statistics {
      display: flex;
      justify-content: flex-end;
      height: 55rpx;
      font-size: 30rpx;
      line-height: 55rpx;

      .amount-desc {
        font-size: 25rpx;

        .amount {
          font-size: 33rpx;
        }
      }
    }
  }

  .order-info {
    margin-top: 15rpx;
    padding: 0rpx $area-lr-padding-size;
    background: #fff;
    box-sizing: border-box;

    .title {
      height: 70rpx;
      line-height: 70rpx;
      font-size: 28rpx;
      border-bottom: 1px solid #f0f0f0;
    }

    .list {
      padding: 15rpx 0 20rpx;

      .info-item {
        display: flex;
        padding: 12rpx 0;
        font-size: 28rpx;

        .item-name {
          margin-right: 50rpx;
          color: #737373;
        }
      }
    }
  }
}
</style>
